<template>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" @change="changeTab">
        <van-tabbar-item>
            <!-- 使用具名插槽填坑 -->
            <van-icon class="iconfont icon-dianying" slot="icon" size="1.3rem"></van-icon>
            <span>电影</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon class="iconfont icon-yingyuan" slot="icon" size="1.3rem"></van-icon>
            <span>影院</span>
        </van-tabbar-item>
        <van-tabbar-item>
            <van-icon class="iconfont icon-zixun" slot="icon" size="1.3rem"></van-icon>
            <span>资讯</span> </van-tabbar-item
        ><van-tabbar-item>
            <van-icon class="iconfont icon-wode" slot="icon" size="1.3rem"></van-icon>
            <span>我的</span>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
// 导入阿里巴巴图标样式
import "@/assets/fonts/iconfont.css";
// 导入需要的vant组件并注册
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);
// 使用icon组件自定义图标
Vue.use(Icon);
export default {
    data() {
        return {
            // 默认选中第一个选项卡
            active: 0,
            // 定义一个地址数组
            url: ["/films/nowPlaying", "/cinemas", "/infomations", "/center"],
        };
    },
    // created周期解决刷新导致的active归零的情况
    created() {
        // 获取路由信息
        let path = this.$route.path;
        let index = this.url.indexOf(path);
        this.active = index > -1 ? index : 0;
    },
    methods: {
        /**
         * index: 对应菜单的下标
         */
        changeTab(index) {
            // let url = "";
            // switch (index) {
            //     case 0:
            //         url = "/films/nowPlaying";
            //         break;
            //     case 1:
            //         url = "/cinemas";
            //         break;
            //     case 2:
            //         url = "/infomations";
            //         break;
            //     case 3:
            //         url = "/center";
            //         break;
            // }
            // this.$router.push(url);
            this.$router.push(this.url[index]);
        },
    },
};
</script>

<style scoped></style>
